import React from 'react';
import { Route, Link } from 'react-router-dom';
// import Home from './components/Home';
// import Detail from './components/Detail';

import routes from './components/routes/index';
export default function App() {
  return (
    <div>
      App
      <hr />
      <h3>链接:</h3>
      <> &nbsp; </>
      <Link to="/Home">去Home</Link>
      <> &nbsp;&nbsp;&nbsp; </>
      <Link to="/Detail">去Detail</Link>
      {/* 展示一级路由的视图 */}
      {/* <Route path="/Home" component={Home}></Route>
      <Route path="/Detail" component={Detail}></Route> */}
      {routes.map((item) => {
        return (
          <Route
            key={item.path}
            path={item.path}
            // component={item.component}
            /* 认知纠正：component就是路由父组件帮忙通过条件渲染把子组件component给new出来了，并且被Route控制的子组件能够使用props里面的history，来做编程式导航 */
            /* 上面注释了的代码，缺点是不够灵活，不能传递更多数据 */
            /* 给路由组件添加固定的属性render属性，类似于component属性，但是功能强大，里面可以定义一个函数,可以通过props形参，把Route组件的props对象往下传递，让下面的组件能够使用编程式导航， */

            /* 关键点在于：创建组件的时候，给组件添加了subRoute属性，值是数组元素的数据item.children，里面就是二级路由 */
            render={(props) => {
              return <item.component {...props} subRoute={item.children}></item.component>;
            }}
          ></Route>
        );
        console.log(item);
      })}
      {/* 二级路由是嵌套在一级路由中的,所以去一级路由对应的组件里面配置二级路由 */}
    </div>
  );
}
